<template>  
  <view class="page">  
  <view class="container">
  	<view class="handera">
		<view class="locationName">
			<uni-icons type="home-filled" size="30" color="blue"></uni-icons>
			
		</view>
  		 <text>河北医科大学第一医院</text>
  	</view>
  </view>
    <view class="header"> 
	 
      <!-- 搜索功能 -->  
	  
      <view class="uni-search-box">  
        <uni-search-bar ref="searchBar" radius="100" cancelButton="none" disabled placeholder="搜索科室、医生"/>  
      </view>  
    </view>  
		<view class="classify_wrap">
	 <!-- 横向滑动开始 -->
	 	  <view class="classify_scroll_x">
	 	    <scroll-view scroll-x="true" >
	 	      <view class="segmented-wrap">
	 	        <uni-segmented-control :current="current" :values="classify" @clickItem="onClickItem" styleType="text" activeColor="#CC0000"></uni-segmented-control>
	 	      </view>
	 	    </scroll-view>
	 	  </view>
	
	 <!-- 横向滑动结束 -->
	 	<!-- 分类 icon 开始 -->
	 			<view class="classify_icon">
	 				<uni-icons type="list" size="28" color="gray"></uni-icons>
	 			</view>
	 			<!-- 分类 icon 结束 -->
	 		</view>
    <!-- 轮播图开始 -->  
    <view class="banner-wrapper">  
      <unicloud-db v-slot:default="{data, loading, error, options}" collection="opendb-banner">  
        <view v-if="error">{{error.message}}</view>  
        <view v-else>  
          <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">  
            <swiper-item v-for="(item, index) in data" :key="item._id">  
              <view class="swiper-item">  
                <image class="banner-image" :src="item.bannerfile.url" mode="aspectFill" :draggable="false" />  
              </view>  
            </swiper-item>  
          </swiper>  
        </view>  
      </unicloud-db>  
    </view>  
    <!-- 轮播图结束 -->  				
	<view class="content">
				<view v-show="current === 0">
					选项卡1的内容
				</view>
				<view v-show="current === 1">
					选项卡2的内容
				</view>
				<view v-show="current === 2">
					选项卡3的内容
				</view>
			</view>
	<!--开始-->
			<uni-grid :column="number">
				<uni-grid-item class="ddd">
									<view class="grid-item-box">
											<image :src="p1" style="width: 100%; height: 100%;" mode="aspectFill"></image>
									</view>
								</uni-grid-item> 
				<uni-grid-item class="ddd">
					<view class="grid-item-box">
						<image :src="p2" style="width: 100%; height: 100%;" ></image>
					</view>
						</uni-grid-item>
				<uni-grid-item class="ddd">
					<view class="grid-item-box">
						<image :src="p3" style="width: 100%; height: 100%;" ></image>
					</view>
				</uni-grid-item>
			</uni-grid>
			
			<!-- 医生列表开始 -->
							<view class="doctorList">
							<unicloud-db v-slot:default="{data, loading, error, options}" collection="hosptial-doctor">
													<view v-if="error">{{error.message}}</view>
													<view v-else>
														<uni-list>
															<uni-list-item v-for="(item, index) in data">
															  <template v-slot:header>
															    <view class="slot-box">
															      <image class="slot-image" :src="item.doctorPhoto.url" mode="widthFix"></image>
															    </view>
															  </template>
															  <template v-slot:body>
															      <view class="doctorName">
															        <text>{{item.doctorName}}</text>
															      </view>
															      <view class="department">
															        <text>科室 ： {{ item.department }}</text>
															      </view>
															      <view class="price">
															        <text class="Price"> ¥ {{ getYuan(item.price) }}</text>
															      </view>
															    </template>
															</uni-list-item>
														</uni-list>
													</view>
												</unicloud-db>
							</view>
							<!-- 医生列表结束 -->
  </view>  
</template>  
<script>  
  export default {  
    data() {  
      return {  
		  current:0,
        indicatorDots: true,  
        autoplay: true,  
        interval: 2000,  
        duration: 50,  
		classify:["主页","儿科","外科","妇产科","内科","五官科"],
		number:3,
		p1:'/static/tabbar/666.jpg',
		p2:'/static/tabbar/777.jpg',
		p3:'/static/tabbar/888.jpg',
		column: 3,
						// vipIcon: '/static/vip/vipIcon.png',
						// vipItem: [
						// 	{text: '购买储值卡', icon: '/static/vip/chuzhika.png'},
						// 	{text: '会员签到', icon: '/static/vip/qiandao.png'},
						// 	{text: '领券中心', icon: '/static/vip/lingquan.png'}
						// ],
      };  
    },  
    methods: {
		onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			goToGrid(){
						uni.switchTab({
						url:'/pages/grid/grid'
						})
						},
						getYuan(data){
						        let yuan = Math.floor(data / 100)
						        let fen = data % 100
						        if(fen == 0) fen = "00"
						        return yuan+'.'+fen
						}}
  };  
</script>  
  
<style scoped>  
  view {  
    display: flex;  
    box-sizing: border-box;  
    flex-direction: column;  
  }  
  .doctorName{
  font-size: 40rpx;
  display: -webkit-box;
  line-height: 1.5em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5rpx;
}
.department{
  font-size: 40rpx;
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
  word-break: break-all; /* 允许在单词内换行 */
  margin-bottom: 20rpx;
  color: #000000;
}
  .container{
	 margin-top: 100rpx;
  }
  .handera{
	  font-size: 20px;
  }
    .slot-box {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    
    .slot-image {
      display: block;
      margin-right: 10px;
      width: 200rpx;
      height: 200rpx;
    }
  .page {  
    background-color: #FFFFFF;  
		/* background-color: #EEEEEE; */
  }  
    
  .header {  
    display: flex;  
    flex-direction: row;  
    padding-left: 10px;  
    background-color: #FFFFFF;

  }  
    
  .uni-search-box {  
    background-color: #FFFFFF;  
    height: 50px;  
    width: 100%;  
  }  
    
  .swiper-item {  
    width: 750rpx;  
    height: 315rpx;  
    line-height: 315rpx;  
  }  
    
  .swiper {  
    height: 315rpx;  
  }  
    
  .banner-image {  
    width: 750rpx;  
    height: 315rpx;  
  }  
.grid-item-box{
  
	      width: 250rpx; /* 或其他您希望的宽度 */  
	      height: 250rpx; /* 或其他您希望的高度 */  
	      /* 其他样式，如背景色、边框等 */  
		  border-style:none;
	  
  }
  .grid-item-box image{
  		margin: 5 auto;
  	}
 .handera{
	 float: left;
	 
 }
 	.classify_scroll_x{
 		white-space: nowrap;
 		width: 650rpx;
 		background-color: #FFFFFF;
 		margin-top: 5rpx;
 		margin-bottom: 8rpx;
 	}
 	.scroll-view-item_H {
 		display: inline-block;
 		width: 140rpx;
 		height: 90rpx;
 		line-height: 90rpx;
 		text-align: center;
 		font-size: 12rpx;
 	}
 	.scroll-view-item_selected{
 		border-bottom: 2px solid red;
 	}
 .classify_wrap {
 		width: 750rpx;
 		display: flex;
 		flex-direction: row;
 	}
 	.classify_scroll_x{
 		white-space: nowrap;
 		width: 650rpx;
 		background-color: #FFFFFF;
 		margin-top: 5rpx;
 		margin-bottom: 8rpx;
 	}
 	.classify_icon{
 		display: flex;
 		flex: 1;
 		background-color: #FFFFFF;
 		margin-left: 3rpx;
 		margin-top: 5rpx;
 		margin-bottom: 8rpx;
 	}
 	.segmented-wrap{
 		width: 1300rpx;
 	}
	.price {	font-size: 40rpx;
	  display: flex;
	  flex-direction: row;
	  line-height: 60rpx;
	}

</style>